<template>
  <div class="elevator-list-content">
    <div class="search-content">
      <span class="search-title">内容筛选</span>
      <el-row class="search-select-row" type="flex"  align="middle">
        <el-col :span="8">
          <el-row type="flex">
            <span class="search-item-title">区域：</span>
            <el-select class="search-input" size="small" v-model="elevatorArea" placeholder="请选择">
              <el-option
                v-for="item in elevatorAreaOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex">
            <span class="search-item-title">梯号：</span>
            <el-input class="search-input" size="small" v-model="elevatorNo" placeholder="梯号" clearable></el-input>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex">
            <span class="search-item-title">状态：</span>
            <el-select size="small" v-model="elevatorStatus" placeholder="请选择">
              <el-option
                v-for="item in elevatorStatusOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-row>
        </el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button class="search-btn-reset" size="small">重置</el-button>
        <el-button class="search-btn-sure" type="warning" size="small">确定</el-button>
      </el-row>
    </div>

    <div class="table-div">
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#1E2533',color:'#d3d3d3', borderColor:'#373738'}"
        :cell-style="{background:'#131417',color:'#d3d3d3', borderColor:'#373738'}"
        style="width: 100%;background:#131417">
        <el-table-column prop="no" label="编号"> </el-table-column>
        <el-table-column prop="area" label="区域"> </el-table-column>
        <el-table-column prop="group" label="群组"> </el-table-column>
        <el-table-column prop="elevator_no" label="梯号"> </el-table-column>
        <el-table-column prop="service_status" label="服务状态">
          <template slot-scope="scope">
            <div v-if="scope.row.service_status == 1" class="normal"></div>
            <div v-else class="error"></div>
          </template>
        </el-table-column>
        <el-table-column prop="error_status" label="故障">
          <template slot-scope="scope">
            <div v-if="scope.row.error_status == 1" class="normal"></div>
            <div v-else class="error"></div>
          </template>
        </el-table-column>
        <el-table-column prop="power_status" label="电源状态">
          <template slot-scope="scope">
            <div v-if="scope.row.power_status == 1" class="normal"></div>
            <div v-else class="error"></div>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <span>解决</span>&nbsp&nbsp
            <span>详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>


  </div>
</template>

<script>
export default {
  name: 'ElevatorList',
  computed:{
	},
  components: {
  },
  data() {
      return {
        elevatorArea:"区域1",
        elevatorAreaOptions: [{
          value: '区域1',
          name: '上海'
        }, {
          value: '区域2',
          name: '浙江'
        }],
        elevatorNo:"",
        elevatorStatus:-1,
        elevatorStatusOptions: [{name:"全部", value:-1}, {name:"正常", value:0}, {name:"异常", value:1}],
        tableData:[{
          no:154,
          area:"一楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:1,
          error_status:1,
          power_status:1,
        },{
          no:234,
          area:"一楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:1,
          error_status:0,
          power_status:1,
        },{
          no:454,
          area:"二楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:0,
          error_status:1,
          power_status:0,
        },{
          no:154,
          area:"一楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:1,
          error_status:1,
          power_status:1,
        },{
          no:234,
          area:"一楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:1,
          error_status:0,
          power_status:1,
        },{
          no:454,
          area:"二楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:0,
          error_status:1,
          power_status:0,
        },{
          no:154,
          area:"一楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:1,
          error_status:1,
          power_status:1,
        },{
          no:234,
          area:"一楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:1,
          error_status:0,
          power_status:1,
        },{
          no:454,
          area:"二楼",
          group:"P1-P6",
          elevator_no:34,
          service_status:0,
          error_status:1,
          power_status:0,
        }],
      };
    },
    methods: {
      
      
    },
    mounted() {

      
    },
    activated() {
    },
    watch: {
		  
    }
}
</script>

<style lang="scss" scoped>
  @import '~scss_vars';
  .elevator-list-content {
    .search-content {
      height: 125px;
      background-color: #131417;
      padding: 10px;
      border-radius: 8px;
      .search-title {
        font-size: 18px;
        color: #d3d3d3;
        
      }
      .search-select-row {
        margin-top: 20px;
      }
      .search-item-title {
        font-size: 14px;
        color: #d3d3d3;
        margin-left: 20px;
        margin-right: 20px;
      }
      .search-input {
        width: 50%;
      }
      .search-btn-reset {
        width: 80px;
        margin-right: 20px;
        margin-top: 10px;
        background: #E2E2E2;
        border-color: #E2E2E2;
      }
      .search-btn-sure {
        width: 80px;
        margin-top: 10px;
        margin-right: 50px;
        background: #B83E25;
        border-color: #B83E25;
      }
    }

    .table-div {
      background-color: #131417;
      padding: 10px;
      margin-top: 20px;
      z-index: auto;
      .normal {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: rgb(123, 189, 31);
      }

      .error {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: rgb(197, 43, 43);
      }
    }
  }
</style>